<template>
	<view class="loginBox">
		<template v-if="flag">
			<view class="title">完善信息</view>
			<view class="formBox">
				<view class="inputItem">
					<view class="txt">姓名：</view>
					<input class="myinput" v-model="formData.name" placeholder="请输入姓名"/>
				</view>
				<view class="inputItem">
					<view class="txt">电话：</view>
					<input class="myinput" v-model="formData.phone" placeholder="请输入电话"/>
				</view>
			</view>
			<view class="btnbox">
				<view class="btn" @click="comfirm">确定</view>
			</view>
			<view class="btnbox tguo">
				<view class="btn" @click="goPage">跳过</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import {login,saveMemberInfo} from '@/api/index.js'
	import {setStorage,toast,checkMobile} from '@/utils/common.js'
	export default defineComponent({
		components:{
			
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo), 
				formData:{},
				flag:false
			})
			
			onMounted(()=>{
				// 登录
				goLogin()
			})
			
			
			const goLogin = ()=>{
				uni.showLoading({
					title: '登录中...'
				});
				login().then(res =>{
					uni.hideLoading();
					if(res.code == 0){
						// 登录成功
						setStorage('token',res.data.token) // 保存token
						//setStorage('userInfo',JSON.stringify(res.data.user))
						store.commit('base/set_userInfo',res.data.user)
						
						state.formData.name = state.userInfo.name
						state.formData.phone = state.userInfo.phone
						
						if(state.userInfo.phone && state.userInfo.name){
							goPage()
						}else{
							// 补充资料
							state.flag = true
						}
						
					}else{
						uni.showModal({
							title: '提示',
							content: '登录失败，请重试！',
							//showCancel: false,
							success: async (res)=> {
								goLogin()
							}
						})
					}
				})
			}
			const goPage = ()=>{
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
			
			const comfirm = async ()=>{
				if(!state.formData.name){
					return toast('请输入姓名')
				}else if(!state.formData.phone){
					return toast('请输入手机号')
				}else if(!checkMobile(state.formData.phone)){
					return toast('手机号输入有误')
				}
				const res = await saveMemberInfo(state.formData)
				if(res.code == 0){
					goPage()
				}else{
					toast(res.msg || '保存失败，请重试')
				}
			}
			
			return {
				...toRefs(state),
				goPage,
				comfirm
			}
		}
	})
</script>

<style lang="scss" scoped>
	.loginBox{
		padding: 30rpx;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			padding: 30rpx 0;
			color: #fba70e;
		}
		.formBox{
			box-sizing: border-box;
			width: 100%;
			padding:0;
			border: 1px solid #fba70e;
			padding:0 20rpx;
			.inputItem{
				display: flex;
				height: 110rpx;
				line-height:110rpx;
				padding:0 10rpx;
				font-size: 30rpx;
				margin: 0;
				&+.inputItem{
					border-top:1px solid #fba70e;
				}
				.txt{
					width: 100rpx;
					color: #000;
				}
				.myinput{
					display: block;
					height: 100%;
					line-height:90rpx; 
					vertical-align:middle;
					font-size: 30rpx;
					color: #000;
				}
				.desc{
					flex: 1;
					text-align: right;
				}
				.rdbox{
					flex: 1;
					display: flex;
					align-items: center;
				}
			}
			.fbtbox{
				padding: 30rpx 0;
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				color: #fff;
			}
		}
		.btnbox{
			display: flex;
			padding: 50rpx;
			.btn{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background: #fba70e;
				font-size: 32rpx;
				color: #fff;
			}
			&.tguo{
				padding-top: 0;
				.btn{
					background: #d3d1d4;
					color: #7c7b7c;
				}
			}
		}
	}
	
</style>
